<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/head"></head>
<title>编辑文章</title>
<link rel="stylesheet" th:href="@{/admin/css/publish.css}">
<link rel="stylesheet" th:href="@{/lib/editormd/editormd.min.css}">
<body>
<!-- vue入口 -->
<div id="app">
    <!-- 布局容器 -->
    <div :class="'app-wrapper' + sidebarFlag">
        <!-- aside -->
        <div th:replace="admin/common/side"></div>

        <!-- container -->
        <el-container class="main-container">
            <!-- header -->
            <div style="background-color: rgb(84, 92, 100);" th:replace="admin/common/header"></div>

            <!-- main -->
            <el-main class="app-main">
                <el-card>
                    <h2>编辑文章</h2>
                    <div style="margin-bottom: 6px;">
                        <el-row :gutter="100">
                            <el-col :xs="24" :sm="24" :lg="12" :span="12">
                                <el-input v-model="article.title" placeholder="请输入文章标题">
                                    <template slot="prepend">文章标题</template>
                                </el-input>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="12" :span="12">
                                <el-input v-model="article.author" placeholder="请输入文章作者">
                                    <template slot="prepend">文章作者</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <br/>
                        <el-row :gutter="100">
                            <el-col :xs="24" :sm="12" :lg="6" :span="4" class="category">
                                <el-tooltip class="item" effect="dark" content="下拉框中没有？可直接键入" placement="top-start">
                                    <el-select v-model="article.category" allow-create filterable placeholder="请选择文章分类">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-tooltip>
                            </el-col>
                            <el-col :xs="24" :sm="12" :lg="6" :span="8" style="padding-top:10px;">
                                <div>
                                    <el-tag
                                            :key="tag"
                                            v-for="tag in dynamicTags"
                                            closable
                                            :disable-transitions="false"
                                            @close="handleCloseTag(tag)">
                                        {{tag}}
                                    </el-tag>
                                    <el-input
                                            class="input-new-tag"
                                            v-if="inputVisible"
                                            v-model="article.tags"
                                            ref="saveTagInput"
                                            size="small"
                                            @keyup.enter.native="handleInputConfirm"
                                            @blur="handleInputConfirm"></el-input>
                                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+文章标签
                                    </el-button>
                                </div>
                            </el-col>
                            <el-col :xs="24" :sm="24" :lg="12" :span="12" style="padding-top:10px;">
                                <el-input v-model="article.origin" placeholder="请输入文章来源，默认来自本系统">
                                    <template slot="prepend">文章来源</template>
                                    {{article.origin}}
                                </el-input>
                            </el-col>
                        </el-row>
                    </div>
                    <div>
                        <div id="article">
                            <textarea id="article-editor-md" ref="articleEditorMd" name="article-editor-md">{{article.contentMd}}</textarea>
                        </div>
                    </div>
                    <div>
                        <el-row :gutter="20">
                            <el-col :xs="24" :sm="24" :lg="24" :span="12">
                                <el-button type="primary" @click="publishBtn(0)">存入草稿</el-button>
                                <el-button type="warning" @click="publishBtn(1)">发布文章</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-main>
        </el-container>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/lib/editormd/jquery-3.3.1.min.js}"></script>
<div th:replace="admin/common/js"></div>
<script type="text/javascript" th:src="@{/lib/editormd/editormd.min.js}"></script>
<script type="text/javascript" th:src="@{/admin/js/edit.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var markdownContent = editormd('article', {
        htmlDecode : true, // Decode all html tag & attributes
        width: '100%',
        height: 540,
        syncScrolling: "single",
        path: '../../../lib/editormd/lib/',
        saveHTMLToTextarea: true,

        emoji: true,
        watch: false,
        codeFold: true,

        toolbarIcons: function () {
            return ["undo", "redo", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "|", "list-ul", "list-ol", "|", "link", "reference-link", "image", "code", "preformatted-text", "table", "datetime", "emoji", "html-entities", "goto-line", "|", "preview", "fullscreen", "", "||", "watch"];
        },
    })
</script>
</html>
